<template>


  <div>
      <div class="crumbs">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> {{title}}</el-breadcrumb-item>
                    </el-breadcrumb>
    </div>
      
    <el-main>
            
      <div class="container">
       
        
       <el-row>
            <el-col :span="22" :push="1" :xs="4">
                

                <div>
                    <el-form :inline="true">
                        <el-form-item style="float:left" label="查询用户信息">
                            <el-input
                                v-model="keyUser"
                                placeholder="查询所需要的内容">
                            </el-input>
                        </el-form-item>
                       <el-form-item style="float:right">
                        <el-button type="primary" 
                            size='small'
                            icon="el-icon-edit-outline"
                            @click="handleAdd()">添加</el-button>
                      </el-form-item>
                    </el-form>
                </div>
      <div class="table">
     
                <el-table :data="searchUserinfo(keyUser)" border>
                    <el-table-column
                        type="index"
                        label="序号"
                        width="80px"
                        align="center"
                        border>
                      </el-table-column>
                    <el-table-column label="分类名称"  align="center">                       
                        <template slot-scope="scope">                            
                            <span>{{ scope.row.c_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间"  align="center">                       
                        <template slot-scope="scope">                            
                            <span>{{ scope.row.create_at | moment }}</span>
                        </template>
                    </el-table-column>

                    
                  
                  <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)" 
                                type="success">编辑</el-button>
                            <el-button 
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <add-cate :dialogCate="dialogCate" @update="getUserinfo"></add-cate>

                 <edit-cate :dialogEdit="dialogEdit" @updateEdit="getUserinfo" :form="form"></edit-cate>
                </div>
                </el-col>
          </el-row>
          <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="userList.length">
                    </el-pagination>
             </div> 
          </div>
          
                  
           </el-main>
  </div>
</template>

<script>
import addCate from './addCate.vue'
import EditCate from './editCate.vue'

export default {
  components: { addCate,
  EditCate },
  data(){
    
      return{
          title: this.$route.meta.title,
          dialogCate:{
              show:false
          },
          dialogEdit:{
              show:false
          },
          
          keyUser:"",
          userList:[],
          form:{
                c_name:""
            },
          pageSize:4,
          pageSizes:[2,4,12,16],
          tableData:[],
          currentPage:1
      
      }
  },
  created(){
        this.getUserinfo()
    },
    methods:{
        getUserinfo(){
            this.$axios.get('/cate/all').then(res=>{
                this.userList = res.data
                this.getPageData()
            })
        },
        getPageData(){
            let start = (this.currentPage-1)*this.pageSize;
            let end = start+this.pageSize;
            this.tableData = this.userList.slice(start,end)
        },
        searchUserinfo(keyUser){
            return this.tableData.filter((user)=>{
                if(user.c_name.includes(keyUser)){
                    return user
                }
            })
        },
        handleAdd(){
            this.dialogCate.show = true
        },
        handleSizeChange(val){
            this.pageSize = val
            // this.getUserinfo()
            this.getPageData()
        },
        handleCurrentChange(val){
            this.currentPage = val
            this.getPageData()


        },
        handleDelete(index,row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res=>{
                let params = {
                    id:row.id
                }
                this.$axios.delete('/cate/del',{data:params}).then(res=>{
                    this.$message({
                            type:"success",
                            message:"删除信息成功"
                        })
                        this.getUserinfo()
                })
            }).catch(()=>{
                console.log("放弃了")
            })
        },
        handleEdit(index,row){
            this.dialogEdit.show = true;
            this.form = {
                c_name:row.c_name,
                id:row.id
            }
        }
    }

}
</script>

<style scoped>
.el-main{
padding: 0;
margin: 0;
}
.crumbs{
      margin: 10px;
}
.container{
      padding: 20px;
      background: #fff;
      margin: 10px; }
.pagination{
    margin-top: 10px;
}
</style>